<template>
    <div class="password">
        <mt-header fixed title="修改个人信息" id="header1"></mt-header>
         <div class="back" @click="backPage">
            <img src="../../public/image/back.png" alt="" />
        </div>
        <div class="passwordContent">
            <p>VTS维护信息管理系统</p>
            <div class="pass">
                <el-form ref="form" :model="form" id="form1">
                    <el-form-item >
                        <el-input v-model="form.loginname" placeholder="请输入用户名" prefix-icon="iconfont icon-icon"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-input v-model="form.passwordOld" placeholder="请输入旧密码" prefix-icon="iconfont icon-mima1"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.passwordNew" placeholder="请输入新密码" prefix-icon="iconfont icon-mima1"></el-input>
                    </el-form-item>
                    <el-form-item id="el_form">
                        <el-button type="primary" @click="sure" :plain="true">确定</el-button>
                        <el-button type="primary">取消</el-button>
                    </el-form-item>
                    <p class="selfInfo" @click="changeInfo">修改个人资料</p>
                </el-form>
                 <el-form ref="form" :model="form"  id="form2">
                    <el-form-item>
                        <el-input v-model="form.username" prefix-icon="iconfont icon-icon"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-input v-model="form.phone"  prefix-icon="iconfont icon-shouji"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.email"  prefix-icon="iconfont icon-youxiang"></el-input>
                    </el-form-item>
                    <el-form-item id="el_form">
                        <el-button type="primary" @click="saveInfo" :plain="true">确定</el-button>
                        <el-button type="primary">取消</el-button>
                    </el-form-item>
                    <p class="selfInfo" @click="changePass">修改登陆密码</p>
                    <p class="selfInfo">绑定微信</p>
                    <p class="selfInfo">解绑微信</p>
                </el-form>
            </div>
        </div>
        <div class="bottom">
            广州中交通讯有限公司
        </div>
    </div>
</template>
<script>
import axios from "axios";
import qs from 'qs';
export default {
    data(){
        return{
             form: {
                loginname: '',
                passwordOld: '',
                passwordNew: '',
                username: '',
                phone: '',
                email: ''
            },
        }
    },
    methods:{
        backPage(){
            this.$parent.$router.go(-1);
        },
        changeInfo(){
            var form1 = document.getElementById("form1");
            var form2 = document.getElementById("form2");
            form1.style.display="none";
            form2.style.display="block";
        },
        changePass(){
            var form1 = document.getElementById("form1");
            var form2 = document.getElementById("form2");
            form1.style.display="block";
            form2.style.display="none";
        },
        sure(){
            var that = this;
            this.axios.post("alterPersonPort/changePwd",
                qs.stringify({
                    loginname:that.form.loginname,
                    passwordOld:that.form.passwordOld,
                    passwordNew:that.form.passwordNew
                })
            ).then(function(res){
                window.console.log(res);
                if(res.data.code == 1){
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        duration:'2000',
                        showClose:false,
                        customClass:"user-defined-style"
                    });
                    that.$router.push('/index');
                }
                if(res.data.code == -1){
                     that.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration:'2000',
                        showClose:false,
                        customClass:"user-defined-style"
                    });
                }
            })
            
        },
        saveInfo(){
            
        },
        //取消修改
        cancleModify(){
        }
    }
}
</script>
<style scoped lang="scss">
    .password{
        position:relative;
        width:100vw;
        overflow: hidden;
        .back{
            position:fixed;
            left:0;
            top:0;
            width:10vw;
            height:40px;
            z-index:5;
            img{
                margin-top:9px;
                display:block;
            }
        }
        .passwordContent{
            width:100vw;
            margin-top:100px;
            overflow: hidden;
            p{
                line-height:30px;
                text-align:center;
            }
            .pass{
                width:85vw;
                margin:20px auto 0;
                border-radius: 5px;
                overflow: hidden;
                border:1px solid #f3f3f3;
                padding-bottom:20px;
                .selfInfo{
                    float:left;
                    width:23vw;
                    font-size:0.8rem;
                    text-align: center;
                    color:darkred;
                    border-bottom:1px solid darkred;
                    margin-right:5px;
                }
                #form1,#form2{
                    
                    padding:10px 0;
                }
                #form2{
                    display: none;
                }
            }
        }
        .bottom{
            width:100vw;
            line-height:30px;
            text-align:center;
            margin-top:250px;
            font-size:0.8rem;
        }
    }
</style>
<style>
.password{
    background-color:#fff;
}
.password .passwordContent .pass #form1[data-v-f24765f6],.password .passwordContent .pass #form2[data-v-f24765f6]{
    padding:10px 20px;
}

</style>


